<template>
  <div>
   
    <!-- <van-tabs v-model="active" @click="change">
      <van-tab
        v-for="item in list"
        :key="item.miniWallkey"
        :title="item.title"
        :name="item.miniWallkey"
      ></van-tab>
    </van-tabs> -->
    <van-card
      v-for="(item, index) in cate"
      :price="item.price"
      :title="item.title"
      :thumb="item.img"
      :key="index"
      @click="gotodetail(item)"
    >
    
    <template #footer>
    <van-icon name="shopping-cart-o" size="30" @click.stop="add(item)"/>
            
    </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "10062603",
      list: [],
      cate: [],
    };
  },
  mounted() {
    this.getlist();
    this.getcate();
  },
  methods: {
    getlist() {
      this.$http("/category", "get").then((res) => {
        console.log(res);
        this.list = res.data.data.category.list;
      });
    },
    getcate() {
      this.$http(
        "/subcategory/detail",
        "get",
        {},
        { miniWallkey: this.active, type: "pop" }
      ).then((res) => {
        console.log(res);
        console.log(this.active);
        this.cate = res.data
      });
    },
    change() {
      this.getcate();
    },
    gotodetail(item){
        this.$router.push({path:'/detail',query:{item}})
    },
    add(item){
        this.$store.commit("add",item)
    }
  },
};
</script>

<style lang="scss"></style>
